<template>
  <div style="background: #e9f3ff; height: 100%; padding: 0 0 0 20px">
    <div class="header">
      <div
        v-for="(item, index) in array"
        :key="index"
        class="header_item"
        @click="toggleDropdown(index)"
      >
        <span>
          {{ item.label }}
        </span>
        <span class="header_icon">
          <el-icon
            v-if="!activeDropdowns[index] || !boolean"
            class="el-icon-arrow-down"
            ><ArrowDown
          /></el-icon>
          <el-icon v-else class="el-icon-arrow-down"><ArrowUp /></el-icon>
        </span>
        <!-- 下拉菜单 -->
        <transition name="el-zoom-in-top">
          <div
            v-show="activeDropdowns[index] && boolean"
            :class="`dropdown-menu${index + 1}`"
          >
            <div
              v-for="(subItem, subIndex) in item.value"
              :key="subIndex"
              class="dropdown-item"
              :class="{ active: selected === subItem.value }"
              @click.stop="selectOption(subItem.id)"
            >
              {{ subItem.label }}
            </div>
          </div>
        </transition>
      </div>
      <div class="header_custom" @click="handleClick">自定义模板</div>
    </div>
    <div style="margin-top: 100px; padding: 0 278px">
      <el-input
        v-model="input_txt"
        :rows="20"
        type="textarea"
        placeholder="请输入需要分析的文本"
        :input-style="inputStyle"
      />
    </div>

    <div style="margin-top: 25px; padding: 0 278px">
      <div style="display: flex; justify-content: space-between; width: 100%">
        <div style="display: flex; justify-content: flex-end; width: 250px">
          <span style="margin-left: 2rem">
            <el-button @click="transfer" class="submit_btn">执行分析</el-button>
          </span>
          <span width="100px">
            <el-button @click="reset" class="reset_btn">重 置</el-button>
          </span>
        </div>
      </div>
    </div>
    <DiaLog ref="DiaLogRef"></DiaLog>
  </div>
</template>

<script lang="js" setup>
import { onMounted, ref ,onBeforeUnmount} from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex' // 引入 useStore
import {
  ArrowDown,
  ArrowUp,
} from '@element-plus/icons-vue'
import DiaLog from './DiaLog.vue'
import {  textCode } from "@/api/index.js";


const selected = ref('')
const input_txt = ref('')
// 跟踪哪个下拉菜单是打开的
const activeDropdowns = ref([])
const boolean = ref(false);
const DiaLogRef = ref(null)

const handleClick = () => {
  DiaLogRef.value.handleOpen()
}

const closeAllDropdowns = () => {
  boolean.value = false
  activeDropdowns.value = activeDropdowns.value.map(() => false)
}
// 添加全局点击事件监听
const handleClickOutside = (event) => {
  if (!event.target.closest('.header_item')) {
    closeAllDropdowns()
  }
}

const array = ref([
  {
     label:"营销资费申请模板",
     value:[
        {
          value: '营销资费申请模板（业务类）',
          label: '业务类',
          id: "Temp_Product_BusiPro01"
        },
        {
          value: '营销资费申请模板（家庭类）',
          label: '家庭类',
          id: "Temp_Product_FamilyPro01"
        },
        {
          value: '营销资费申请模板（主体产品类）',
          label: '主体产品类',
          id: "Temp_Product_MainPro01"
        },
        {
          value: '营销资费申请模板（促销类）',
          label: '促销类',
          id: "Temp_Product_SalePro01"
        },
        {
          value: '营销资费申请模板（促销类-已有产品）',
          label: '促销类-已有产品',
          id: "Temp_Product_SalePro02"
        }
    ]
  },
  {
     label:"【政企】营销资费申请模板",
     value:[
        { value: '【政企】营销资费申请模板（业务类）', label: '业务类' , id: "Temp_Product_BusiPro02" },
        { value: '【政企】营销资费申请模板（促销类）', label: '促销类' , id: "Temp_Product_SalePro03" },
    ]
  },
  {
    label:"融合场景定义模板",
    value:[
      { value: '融合场景定义模板', label: '场景类', id: "Temp_Product_Union01" }
    ]
  }
])

// 切换下拉菜单显示/隐藏
const toggleDropdown = (index) => {
  // 先关闭所有下拉菜单
  activeDropdowns.value = activeDropdowns.value.map(() => false)
  // 然后切换当前点击的下拉菜单
  activeDropdowns.value[index] = !activeDropdowns.value[index]
  boolean.value = !boolean.value
}

// 选择子选项
const selectOption = (value) => {
  textCode(value).then(res => {
    const {data:{code,data:d1}} = res
    if(code == 200){
      input_txt.value = d1.text
    }else{
      input_txt.value = ''
    }
  })
  selected.value = value
  // 选择后关闭所有下拉菜单
  activeDropdowns.value = activeDropdowns.value.map(() => false)
  boolean.value = false;
}

const inputStyle = {
  "padding": "20px",
  'border-radius': '30px',
  'border-image': 'linear-gradient(81deg, #47ddf6 0%, #254eef 50%, #bb6ff1, 100%) 3 3',
  background: "#ffffff",
}

const reset = () => {
  input_txt.value = ''
  selected.value = '营销资费申请模板（促销类）'
}

const router = useRouter()
const store = useStore() // 获取 store 实例

const transfer = () => {
  store.commit('setInputTxt', input_txt.value) // 保存 input_txt 到 state
  store.commit('setTemplate', selected.value) // 保存 selected 到 state
  router.push('/result')
}

onMounted(() => {
  selected.value = '营销资费申请模板（促销类）'
  document.addEventListener('click', handleClickOutside)
})

onBeforeUnmount(() => {
  document.removeEventListener('click', handleClickOutside)
})
</script>

<style scoped lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.header {
  background-color: #ffffff;
  padding: 12px 20px;
  height: 33px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  position: relative;

  .header_custom {
    cursor: pointer;
    margin-left: 30px;
    font-size: 14px;
  }

  .header_item {
    margin-left: 30px;
    position: relative;
    cursor: pointer;
    font-family: PingFangSC-Regular;
    font-size: 14px;

    .header_icon {
      margin: 0 0 0 10px;

      .el-icon-arrow-down {
        transform: translateY(2px);
      }
    }

    &:hover {
      color: #409eff;
    }
  }
}

.dropdown-menu1,
.dropdown-menu2,
.dropdown-menu3 {
  position: absolute;
  top: 100%;
  z-index: 1000;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.dropdown-menu1 {
  left: -3px;
  min-width: 99%;
}

.dropdown-menu2 {
  left: 6px;
  min-width: 96%;
}

.dropdown-menu3 {
  left: -2px;
  min-width: 99%;
}

.dropdown-item {
  padding: 8px 20px;
  line-height: 1.5;
  color: #606266;

  &:hover {
    background-color: #f5f7fa;
    color: #409eff;
  }

  &.active {
    color: #409eff;
    background-color: #ecf5ff;
    font-weight: bold;
  }
}

.el-descriptions {
  margin-top: 20px;
}

.cell-item {
  display: flex;
  align-items: center;
}

.title {
  text-align: center;
  background: linear-gradient(
    78deg,
    #3cc1d4 16%,
    #5499f4 28%,
    #234def 55%,
    #b86ef1 100%
  );
  color: transparent;
  -webkit-background-clip: text;
}

.submit_btn {
  width: 138px;
  height: 43px;
  border-radius: 37px;
  background-image: url("../../public/bg_submit_btn.png");
  color: #fff;
  padding-left: 2.5rem;
}

.reset_btn {
  width: 94px;
  height: 43px;
  border-radius: 37px;
  color: #fff;
  background: linear-gradient(135deg, #3e63fd 0%, #fed6e3 100%);
  margin-left: 20px;
}
</style>
